<template>
  <div id="pathFollowing">
    <pub-header :title="title" id="header"></pub-header>
    <div id="pathMap" class="vux-1px-t" ref="content"></div>
  </div>
</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  export default{
    components: {
      PubHeader
    },
    created() {
      const {oid, type} = this.$route.query
      if(!oid || !type || !this.service_id[type]){
        this.$router.push('/')
        this.$vux.toast.text('参数错误或缺失', 'middle')
        return
      }
      this.getData()
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const headerHeight = document.getElementById('header').offsetHeight
      const pensonHeight = bodyHeight - headerHeight
      this.$refs['content'].style.height = pensonHeight + 'px'
    },
    computed: {
      map() {
        return new AMap.Map('pathMap', {
          resizeEnable: true,
          zoom: 13
        })
      },
      title() {
        return this.$route.query.status == 'now'? '路径跟踪': '路径回放'
      }
    },
    data() {
      return {
        service_id: {
          xiaojiansudi: 1,
          tongchengkuaiche: 2,
          xianshitong: 3,
          tongchenggongpei: 4,
          kuaidibao: 5
        },
        start: null,
        end: null,
        person: null
      }
    },
    methods: {
      setMap(){
        const start = this.start
        const end = this.end
        const person = this.person
        const u = navigator.userAgent;
        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        let faImg = $config.wechatHost + "/static/img/fa2.png"
        let daImg = $config.wechatHost + "/static/img/da2.png"
        let personImg = $config.wechatHost + "/static/img/person2.png"
        let sizeX = 15
        let sizeY = 21
        if(!isAndroid) {
          faImg = $config.wechatHost + "/static/img/fa.png"
          daImg = $config.wechatHost + "/static/img/da.png"
          personImg = $config.wechatHost + "/static/img/person.png"
          sizeX = 30
          sizeY = 42
        }
        this.setMarker([start.lng, start.lat], [sizeX, sizeY], faImg)
        this.setMarker([end.lng, end.lat], [sizeX, sizeY], daImg)
        if(this.$route.query.status == 'now' && person) {
          this.setMarker([person.lng, person.lat], [sizeX, sizeY], personImg)
        }
        this.setDriving(start, end)

      },
      setMarker(position, size, image) {
        new AMap.Marker({
          map: this.map,
          position,
          icon: new AMap.Icon({
            size: new AMap.Size(size[0], size[1]),  //图标大小
            image,
            imageOffset: new AMap.Pixel(0, 0)
          })
        })
      },
      setDriving(start, end, waypoints = []){
        AMap.plugin('AMap.Driving',() => {//异步
          let driving = new AMap.Driving({
            map: this.map,
            hideMarkers: true
          });
          driving.search(
            new AMap.LngLat(start.lng, start.lat), //起点
            new AMap.LngLat(end.lng, end.lat),
            {waypoints}
          )
        })
      },
      getData() {
        let url = $config.host + '/api/Pathtrace/getPathTraceHistoryInfo'
        if(this.$route.query.status == 'now') {
          url = $config.host + '/api/Pathtrace/getPathTraceInfo'
        }
        this.$http.post(url, qs.stringify({
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          oid: this.$route.query.oid,
          service_id: this.service_id[this.$route.query.type]
        })).then(res => {
          const {code, msg, data} = res.data
          if(code == 1) {
            this.start = data.data_list.start_point
            this.end = data.data_list.end_point[0]
            if(this.$route.query.status == 'now') {
              this.person = data.data_list.current_point
            }
            this.setMap()
          }
        })
      }
    }
  }
</script>
